<template>
	<view class="home-container">
		<!-- 顶部栏 -->
		<view class="header">
			<view class="header-left">
				<text class="location">当前位置</text>
				<text class="location-arrow">▼</text>
			</view>
			<view class="header-right">
				<image class="icon-message" src="/static/common/user_message.svg" mode="aspectFit"></image>
			</view>
		</view>

		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-box">
				<text class="icon-search">🔍</text>
				<input class="search-input" placeholder="搜索商品" />
			</view>
		</view>

		<!-- 公告栏 -->
		<view class="announcement-bar">
			<text class="announcement-icon">📢</text>
			<text class="announcement-text">欢迎光临，新用户注册即送100积分！</text>
		</view>

		<!-- 轮播图 -->
		<swiper class="banner-swiper" indicator-dots autoplay circular interval="3000" duration="500">
			<swiper-item v-for="(item, index) in bannerList" :key="index">
				<image class="banner-image" :src="item.image" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<!-- 功能分类 -->
		<view class="category-grid">
			<view class="category-item" v-for="(item, index) in categoryList" :key="index"
				@click="navigateToCategory(item.path)">
				<view class="category-icon-container">
					<image class="category-icon" :src="item.icon" mode="aspectFit"></image>
				</view>
				<text class="category-name">{{item.name}}</text>
			</view>
		</view>

		<!-- 配送方式 -->
		<view class="take_type" @click="navigateToOrder">
			<image class="take_type_bg" src="/static/common/bg/take_type_bg.jpg" mode="aspectFill"></image>
		</view>
		
		<!-- 会员专区 -->
		<view class="member-section">
			<view class="member-content" @click="navigateToMember">
				<image class="member-bg" src="/static/common/bg/yaofriend_quan_bg.svg" mode="aspectFill"></image>
				<view class="member-info">
					<text class="member-title">会员专享</text>
					<text class="member-subtitle">尊享更多优惠</text>
					<view class="member-btn">立即查看</view>
				</view>
			</view>
		</view>

		<!-- 推荐商品 -->
		<view class="section-title">
			<text class="title-text">热门推荐</text>
			<text class="more-text" @click="navigateToOrder">查看更多 ></text>
		</view>

		<view class="product-grid">
			<view class="product-item" v-for="(item, index) in productList" :key="index"
				@click="navigateToProductDetail(item.id)">
				<image class="product-image" :src="item.image" mode="aspectFill"></image>
				<text class="product-name">{{item.name}}</text>
				<view class="product-price-row">
					<text class="product-price">¥{{item.price}}</text>
					<view class="add-btn">+</view>
				</view>
			</view>
		</view>

		<!-- 服务保证 -->
		<view class="service-section">
			<view class="service-item">
				<text class="service-icon">✓</text>
				<text class="service-text">品质保证</text>
			</view>
			<view class="service-item">
				<text class="service-icon">✓</text>
				<text class="service-text">快速送达</text>
			</view>
			<view class="service-item">
				<text class="service-icon">✓</text>
				<text class="service-text">无忧售后</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	// 响应式数据
	const bannerList = ref([{
			image: '/static/index/banner/banner01.jpg'
		},
		{
			image: '/static/index/banner/banner02.jpg'
		}
	])

	const categoryList = ref([{
			name: '热销',
			icon: '/static/common/user_man.svg',
			path: '/pages/order/index'
		},
		{
			name: '新品',
			icon: '/static/common/user_yuyue.svg',
			path: '/pages/order/index'
		},
		{
			name: '套餐',
			icon: '/static/common/tuan.svg',
			path: '/pages/order/index'
		},
		{
			name: '饮品',
			icon: '/static/common/user_pig.svg',
			path: '/pages/order/index'
		},
		{
			name: '小吃',
			icon: '/static/common/user_order.svg',
			path: '/pages/order/index'
		},
		{
			name: '甜点',
			icon: '/static/common/user_juan.svg',
			path: '/pages/order/index'
		},
		{
			name: '会员',
			icon: '/static/common/users_memcard.svg',
			path: '/pages_my/member/index'
		},
		{
			name: '帮助',
			icon: '/static/common/user_help.svg',
			path: '/pages/my/index'
		}
	])

	const productList = ref([{
			id: 1,
			name: '经典奶茶',
			price: '15.00',
			image: '/static/goods/goods01.jpg'
		},
		{
			id: 2,
			name: '拿铁咖啡',
			price: '22.00',
			image: '/static/goods/goods02.jpg'
		},
		{
			id: 3,
			name: '水果茶',
			price: '18.00',
			image: '/static/goods/goods03.jpg'
		},
		{
			id: 4,
			name: '芝士奶盖',
			price: '25.00',
			image: '/static/goods/goods04.jpg'
		}
	])

	// 页面加载
	onLoad(() => {
		console.log('首页加载完成')
	})

	// 导航方法
	const navigateToCategory = (path) => {
		uni.navigateTo({
			url: path
		})
	}

	const navigateToOrder = () => {
		uni.switchTab({
			url: '/pages/order/index'
		})
	}

	const navigateToProductDetail = (id) => {
		uni.navigateTo({
			url: `/pages_order/orderInfo/index?id=${id}`
		})
	}

	const navigateToMember = () => {
		uni.navigateTo({
			url: '/pages_my/member/index'
		})
	}
</script>

<style scoped>
	.home-container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 顶部栏样式 */
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background: linear-gradient(135deg, #ecede8, #ecede8);
	}

	.header-left {
		display: flex;
		align-items: center;
	}

	.location {
		font-size: 28rpx;
		color: white;
		margin-right: 8rpx;
	}

	.location-arrow {
		font-size: 24rpx;
		color: white;
	}

	.header-right {
		display: flex;
		align-items: center;
	}

	.icon-message {
		width: 40rpx;
		height: 40rpx;
		tint-color: white;
	}

	/* 搜索栏样式 */
	.search-bar {
		padding: 20rpx 30rpx;
		background: linear-gradient(135deg, #ecede8, #ecede8);
	}

	.search-box {
		background: white;
		border-radius: 50rpx;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
	}

	.icon-search {
		margin-right: 20rpx;
		font-size: 32rpx;
		color: #999;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
	}

	/* 公告栏样式 */
	.announcement-bar {
		display: flex;
		align-items: center;
		padding: 15rpx 30rpx;
		background: #ecede8;
		margin-bottom: 15rpx;
	}

	.announcement-icon {
		font-size: 30rpx;
		margin-right: 15rpx;
	}

	.announcement-text {
		flex: 1;
		font-size: 26rpx;
		color: #ff6b6b;
	}

	/* 轮播图样式 */
	.banner-swiper {
		height: 700rpx;
		margin: 0 10rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background: white;
	}

	.banner-image {
		width: 100%;
		height: 100%;
	}

	/* 分类网格样式 */
	.category-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
		padding: 40rpx 30rpx;
		background: white;
		margin: 20rpx 30rpx;
		border-radius: 20rpx;
	}

	.category-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.category-icon-container {
		width: 100rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #f8f8f8;
		border-radius: 50%;
		margin-bottom: 20rpx;
	}

	.category-icon {
		width: 60rpx;
		height: 60rpx;
	}

	.category-name {
		font-size: 26rpx;
		color: #333;
		text-align: center;
	}

	/* 取货方式 */
	.take_type {
		position: relative;
		height: 380rpx;
		
		.take_type_bg {
			width: 100%;
			height: 100%;
		}
	}
	
	/* 会员专区样式 */
	.member-section {
		margin: 50rpx 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.member-content {
		position: relative;
		height: 280rpx;
	}
	

	.member-bg {
		width: 100%;
		height: 100%;
	}

	.member-info {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 40rpx;
	}

	.member-title {
		font-size: 32rpx;
		color: white;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.member-subtitle {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.9);
		margin-bottom: 20rpx;
	}

	.member-btn {
		width: 140rpx;
		height: 56rpx;
		background: white;
		color: #ff6b6b;
		font-size: 24rpx;
		border-radius: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 推荐商品样式 */
	.section-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 30rpx 20rpx;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.more-text {
		font-size: 26rpx;
		color: #999;
	}

	.product-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		padding: 0 30rpx 20rpx;
	}

	.product-item {
		background: white;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.product-image {
		width: 100%;
		height: 300rpx;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
	}

	.product-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.5;
	}

	.product-price-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.product-price {
		font-size: 32rpx;
		color: #ff6b6b;
		font-weight: bold;
	}

	.add-btn {
		width: 60rpx;
		height: 60rpx;
		background: #ff6b6b;
		color: white;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 40rpx;
		font-weight: bold;
	}

	/* 服务保证样式 */
	.service-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 40rpx 30rpx;
		background: white;
		margin: 20rpx 0 100rpx;
		background: #ecede8;
	}

	.service-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.service-icon {
		width: 60rpx;
		height: 60rpx;
		background: #ff6b6b;
		color: white;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
		font-size: 36rpx;
	}

	.service-text {
		font-size: 24rpx;
		color: #666;
	}
</style>